<template>
    <el-dialog :modelValue="addVisible" :title="info == undefined ? '新增' : '修改'" width="30%"
        :before-close="handleClose">
        <el-form :model="form" label-width="120px" class="form" :rules="rules" ref="ruleFormRef">
            <!-- <el-form-item label="序号" prop="id">
                <el-input v-model="form.id" />
            </el-form-item> -->
            <el-form-item label="连接名称" prop="jobId">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="数据库类型" prop="remark">
                <!-- <el-input v-model="form.type" /> -->
                <el-select v-model="form.type" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in dbtype" :key="item.dbtype" :label="item.dbtype" :value="item.dbtype" />
                </el-select>
            </el-form-item>
            <el-form-item label="连接地址" prop="beanName">
                <el-input v-model="form.url" />
                <label>SqlServer示例:<span style="color: red;">192.168.1.245:1433</span></label>
                <label>Oracle示例:<span style="color: red;">192.168.1.245:1521/ORCL</span></label>
            </el-form-item>
            <el-form-item label="数据库名称" prop="methodName">
                <el-input v-model="form.dbname" />
                <label><span style="color: red;">SqlServer必填，Oracle可不填</span></label>
            </el-form-item>
            <el-form-item label="用户名" prop="methodParams">
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="cronExpression">
                <el-input v-model="form.password" />
            </el-form-item>


            <!-- 按钮操作组 -->
            <el-form-item class="btn">
                <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
                <el-button type="warning" @click="testdb(ruleFormRef)">测试连接</el-button>
                <el-button @click="close(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch } from 'vue'
import { updateJob, addJob, AddDblist, UpdateDblist ,DatabaseTest} from '../../../../http';
import { DbModel } from '../class/DbModel';
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const props = defineProps({
    addVisible: Boolean,
    info: DbModel
})
const value = ref(1)
const form = ref({
    name: props.info?.name,
    url: '',
    dbname: '',
    username: '',
    password: '',
    type: "",
})
const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
})
//数据类型
const dbtype = [
    { dbtype: "SqlServer" }, { dbtype: "Oracle" }
]
//监听
watch(
    () => props.info,
    (newInfo, oldInfo) => {
        if (newInfo != undefined) {
            let currInfo: DbModel = (JSON.parse(newInfo as any)) as DbModel
            form.value = {
                name: currInfo.name,
                url: currInfo.url,
                dbname: currInfo.dbname,
                username: currInfo.username,
                password: currInfo.password,
                type: currInfo.type,
            }
        } else {
            form.value = {
                name: "",
                url: "",
                dbname: "",
                username: "",
                password: "",
                type: "",
            }
        }
    }
);
//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["CloseAdd"])
const handleClose = (done: () => void) => {
    emits("CloseAdd")
}

const submit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    var parms = {
        name: form.value.name,
        url: form.value.url,
        dbname: form.value.dbname,
        username: form.value.username,
        password: form.value.password,
        type: form.value.type,
    }
    if (props.info == undefined) {
        // 执行添加逻辑 
        const res = await AddDblist(parms) as any as boolean
        console.log(parms);
        // const res = true
        if (res) {
            ElMessage({
                message: '添加成功！',
                type: 'success',
            })
        }
    } else {
        // 执行修改逻辑
        const res = await UpdateDblist(parms) as any as boolean
        console.log(parms);
        // const res = true
        if (res) {
            ElMessage({
                message: '编辑成功！',
                type: 'success',
            })
        }
    }
    ruleFormRef.resetFields()
    emits("CloseAdd")
}

const testdb = async (ruleFormRef: FormInstance | undefined) => {

    if (!ruleFormRef) return
    var parms = {
        name: form.value.name,
        url: form.value.url,
        dbname: form.value.dbname,
        username: form.value.username,
        password: form.value.password,
        type: form.value.type,
    }


    const res = await DatabaseTest(parms) as any 
    console.log(parms);
    // const res = true
    if (res.data.code==200) {
        ElMessage({
            message: '测试连接成功！',
            type: 'success',
        })
    }
    else {
        ElMessage({
            message: '测试连接失败！',
            type: 'error',
        })
    }

    ruleFormRef.resetFields()
    // emits("CloseAdd")
}

const close = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    emits("CloseAdd")
}


</script>
<style lang="scss" scoped>
.form {
    min-height: 500px;

    .btn {
        position: absolute;
        bottom: 10px;
    }
}
</style>
